<template>

  <div class="app-container">

    <!-- <el-steps :active="active" finish-status="success" align-center >
      <el-step title="选择数据库表"></el-step>
      <el-step title="设置字段属性"></el-step>
      <el-step title="设置代码属性"></el-step>
    </el-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->

    <!-- <el-divider  >12313</el-divider> -->

    <!-- 表格-条件筛区域  -->
    <div class="filter-container">
      <el-select v-model="tableName" placeholder="请选择数据库表" @change="chooseTableName($event)" class="filter-item"
                 filterable>
        <el-option v-for="item in tableList" :key="item.tablename"
                   :label="item.tablename" :value="item.tablename">
        </el-option>
      </el-select>
      <el-input v-model="mouduleCode" placeholder="请输入模型描述" style="width: 200px;" class="filter-item"/>
      <el-button class="filter-item" type="primary" icon="el-icon-view" @click="dopreview()">预览</el-button>
      <!-- <el-button   class="filter-item" type="primary" icon="el-icon-search" @click="dobuild()">生成</el-button> -->
    </div>

    <!-- 表格-内容区域 -->
    <el-table v-loading="listLoading" :key="tableKey" :data="columnList" border fit highlight-current-row
              style="width: 100%;">

      <el-table-column v-for="column in columns" :key="column.prop"
                       :prop="column.prop"
                       :label="column.label"
                       :width="column.width"
                       :align="column.align?column.align:'center'"
                       :min-width="column.minWidth"
                       :sortable="column.sortable"
                       :fixed="column.fixed"
                       :type="column.type" :formatter="column.formatter">
        <template slot-scope="scope">
          <!-- 行内显示图片 -->
          <img v-if="column.imgFlag==true" :src="CMBASE.baseFileContext + scope.row[column.prop]" width="60" height="60"
               class="img"/>
          <!-- 行内格式自定义 -->
          <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
          <!-- 行内显示开关按钮 -->
          <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" active-value="1"
                     inactive-value="0">
          </el-switch>
          <!-- 行内显示下拉列 -->
          <el-select v-else-if="column.selectFlag==true" v-model="scope.row[column.prop]">
            <el-option v-for="item in column.dataSource" :key="item.value"
                       :label="item.text" :value="item.value">
            </el-option>
          </el-select>
          <!-- 行内显示文本内容（默认） -->
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>

    </el-table>


    <!--新增编辑界面-->
    <el-dialog title="代码预览" width="85%" top="2vh" :visible.sync="dialogFormVisible" :close-on-click-modal="true">
      <div style="height:500px;overflow-y: scroll;">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="item in codeTabs" :key="item.name"
                       :label="item.title" :name="item.name">
            <!-- <div v-html="item.content"></div> -->
            <pre style="color: red;" contenteditable="true">{{ item.content }}</pre>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="dialogFormVisible=false">取消</el-button>
      </div>
    </el-dialog>


  </div>


</template>

<script>

export default {
  data() {
    return {
      tableKey: 0,
      active: 0,
      listLoading: true,
      tableList: [],
      tableName: "",
      mouduleCode: "",
      columnList: [],
      dialogFormVisible: false,
      activeName: "vue.ftl",
      codeTabs: [],
      columns: [
        {prop: 'column_name', label: '列名', sortable: false},
        {prop: 'column_comment', label: '注释', sortable: false},
        //{prop: 'DATA_TYPE',  label: '字段类型',  sortable:false  },
        {prop: 'column_type', label: '列类型', sortable: false},

        {prop: 'LIST_SHOW_FLAG', label: '列表是否显示', sortable: false, switchFlag: true},
        {
          prop: 'LIST_SHOW_TYPE', label: '列表展示方式', sortable: false, selectFlag: true,
          dataSource: [
            {'value': '0', 'text': '文本框'},
            {'value': '1', 'text': '图片'},
            {'value': '2', 'text': '标签'},
            {'value': '3', 'text': '开关'},
          ]
        },
        {prop: 'FORM_SHOW_FLAG', label: '表单是否显示', sortable: false, switchFlag: true},
        {
          prop: 'FORM_SHOW_TYPE', label: '表单域类型', sortable: false, selectFlag: true,
          dataSource: [
            {'value': '0', 'text': '文本框'},
            {'value': '10', 'text': '计数器'},
            {'value': '21', 'text': '按钮组'},
            {'value': '5', 'text': '开关'},
            {'value': '2', 'text': '下拉框'},
            {'value': '3', 'text': '单图片'},
            {'value': '31', 'text': '多图片'},
            {'value': '1', 'text': '日期选择'},
            {'value': '4', 'text': '文本域'},
            {'value': '6', 'text': '多选'},
            {'value': '7', 'text': '单选'},
            {'value': '8', 'text': '文本编辑器'},
          ]
        },
        {prop: 'FORM_RULE_FLAG', label: '表单是否必填', sortable: false, switchFlag: true},


      ],
    }
  },
  created() {
    this.getTableList();
  },
  mounted() {

  },
  methods: {

    next() {
      if (this.active++ > 2) this.active = 0;
    },
    //获取数据库表列表数据
    getTableList() {
      //【API请求】----获取数据库表列表数据
      this.$api.getTableList().then(response => {
        console.log(response, '11111')
        this.tableList = response.data;
        this.listLoading = false;
      }).catch((res) => {
        console.log(res, 1111)
        this.$message({message: '数据库表列表获取失败', type: 'error'})
      })
    },
    //选中数据库表
    chooseTableName(tableName) {
      this.tableName = tableName;
      this.getColumnList(tableName);
    },
    //获取字段列表数据
    getColumnList(tableName) {
      this.columnList = [];
      //【API请求】----获取用户列表数据
      this.$api.getColumnList({tablename: tableName}).then(response => {
        console.log(response);
        // this.columnList = response.rows;
        response.data.content.forEach(element => {
          element.column_comment ? element.column_comment : "无",
          element.LIST_SHOW_FLAG = "1",
              element.LIST_SHOW_TYPE = "0",
              element.FORM_SHOW_FLAG = "1",
              element.FORM_SHOW_TYPE = "0",
              element.FORM_RULE_FLAG = "0",
              this.columnList.push(element)
        });
        console.log(this.columnList)
        this.listLoading = false;
      }).catch((res) => {
        this.$message({message: '数据库字段列表获取失败', type: 'error'})
      })
    },
    //点击预览事件
    dopreview() {

      if (this.tableName == "") {
        this.$message({message: '请先选择数据库表再进行操作', type: 'error'})
        return false;
      }
      if (this.mouduleCode == "") {
        this.$message({message: '请先输入模型编码', type: 'error'})
        return false;
      }

      console.log(this.columnList)
      let paramList = [];
      this.columnList.forEach(element => {
        console.log(element);
        paramList.push({
          "COLUMN_NAME": element.column_name,
          "COLUMN_COMMENT": element.column_comment,
          "LIST_SHOW_FLAG": element.LIST_SHOW_FLAG,
          "LIST_SHOW_TYPE": element.LIST_SHOW_TYPE,
          "FORM_SHOW_FLAG": element.FORM_SHOW_FLAG,
          "FORM_SHOW_TYPE": element.FORM_SHOW_TYPE,
          "FORM_RULE_FLAG": element.FORM_RULE_FLAG,
          "ELEMENT_DATASOURCE": '',
        })
      });
      let param = {
        data: JSON.stringify(paramList),
        tablename: this.tableName,
        describe: this.mouduleCode,
      }
      console.log(param);
      //【API请求】--- 代码生成预览
      this.$api.doPreview(param).then(response => {
        console.log(response.data)
        this.dialogFormVisible = true;
        this.codeTabs = []
        for (var key in response.data) {
          let tttContent = response.data[key];
          // tttContent.replace(/</g, "&lt;");
          // tttContent.replace(/>/g, "&gt;");
          this.codeTabs.push({name: key, title: key, content: tttContent});
        }
      }).catch((res) => {
        this.$message({message: '代码预览请求失败，请稍后再试', type: 'error'})
      })
    },
    //点击生成事件
    dobuild() {
      console.log(this.columnList)
    }
  },

  beforeDestroy() {

  },
}
</script>
<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
